import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CustomScrollViewDemo extends StatelessWidget {
  // 因为本路由没有使用Scaffold，为了让子级Widget(如Text)使用
  // Material Design 默认的样式风格,我们使用Material作为本路由的根
  @override
  Widget build(BuildContext context) => Material(
        child: CustomScrollView(
          physics: BouncingScrollPhysics(),
          slivers: <Widget>[
            // AppBar，包含一个导航栏
            // 类似于Android中的CollapsingToolbarLayout
            SliverAppBar(
              pinned: true,        //标题栏是否固定
              expandedHeight: 250, //合并的高度，默认是状态栏的高度加AppBar的高度
              // 可以理解为SliverAppBar的背景内容区
              flexibleSpace: FlexibleSpaceBar(
                title: Text('组合滚动模型'),
                centerTitle: true,
                background: Image.asset(
                  'images/card01.png',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SliverPadding(
              padding: EdgeInsets.all(8),
              sliver: SliverGrid(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  mainAxisSpacing: 10,
                  crossAxisSpacing: 10,
                  childAspectRatio: 4
                ),
                delegate: SliverChildBuilderDelegate(
                  (context, index) => Container(
                    alignment: Alignment.center,
                    color: Colors.cyan[100 * (index % 9)],
                    child: Text('grid item $index'),
                  ),
                  childCount: 20
                ),
              ),
            ),
            SliverFixedExtentList(
              itemExtent: 50,
              delegate: SliverChildBuilderDelegate(
                (context, index) => Container(
                  alignment: Alignment.center,
                  color: Colors.lightBlue[100 * (index % 9)],
                  child: Text('list item $index'),
                ),
                childCount: 50
              ),
            )
          ],
        ),
      );
}
